<template>
  <div class="object-deit-btn">
    <n-button
      :secondary="strong"
      :quaternary="!strong"
      :type="hasValue || !strong ? 'info' : 'default'"
      :text="!strong"
      @click="openModal"
    >
      <slot>编辑空间信息</slot>
    </n-button>
    <n-modal v-model:show="showModal">
      <!-- <n-card title="编辑空间信息" closable @close="cancel" class="edit-card"> -->
      <div :style="style" class="edit-container">
        <ObjectEdit
          v-bind="$attrs"
          :modelValue="modelValue"
          :fullScreen="fullScreen"
          @update:modelValue="updateData"
          @cancel="cancel"
          @getAllData="getAllData"
        />
      </div>
      <!-- </n-card> -->
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { isObject } from '@/utils/is';
import {
  PropType,
  ref,
  CSSProperties,
  computed,
  nextTick,
  useAttrs,
  getCurrentInstance,
} from 'vue';
import ObjectEdit from './object-edit.vue';
import { Layer } from 'slash-layer';
import { formatUnit } from '@/utils';

const defaultFieldMap = {
  geometry: 'geometry',
  properties: 'plotProperties',
  areaCode: 'areaCode',
  arae:'area'
};

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({}),
  },
  fullScreen: {
    type: Boolean,
    default: false,
  },
  style: {
    type: Object as PropType<CSSProperties>,
    default: () => {},
  },
  strong: {
    type: Boolean,
    default: false,
  },
  autoUpdate: {
    type: Boolean,
    default: false,
  },
  fieldMap: {
    type: Object as PropType<{
      geometry?: string;
      plotProperties?: string;
      area?: string;
      areaCode?: string;
    }>,
    default: () => ({}),
  },
  /**是否使用带鱼版弹窗 */
  useDyModal: {
    type: Boolean,
    default: true,
  },
  /**面积转化倍率 */
  areaMultiplier: {
    type: Number,
    default: 0,
  },
});
const emits = defineEmits(['update:modelValue', 'cancel', 'getAllData', 'autoUpdateData']);

const showModal = ref(false);

const hasValue = computed(
  () => props.modelValue && isObject(props.modelValue) && Object.keys(props.modelValue).length
);

const instance = getCurrentInstance();

const updateData = (val: any) => {
  emits('update:modelValue', val);
};
const getAllData = (data: any) => {
  if (props.autoUpdate) {
    const result: Record<string, any> = {};
    const map = Object.assign({}, defaultFieldMap, props.fieldMap) as typeof defaultFieldMap;
    Object.keys(map).forEach((key) => {
      switch (key) {
        case 'geometry':
          data['geometry'] && Reflect.set(result, map[key], data['geometry']);
          break;
        case 'properties':
          data['properties'] && Reflect.set(result, map[key], data['properties']);
          break;
        case 'areaCode':
          data['areaData'] && Reflect.set(result, map[key], data['areaData'].areaCode);
          break;
        case 'area':
          data['polyonArea'] &&
            Reflect.set(
              result,
              map[key],
              props.areaMultiplier ? formatUnit(data['polyonArea']) : data['polyonArea']
            );
          break;
      }
    });
    emits('autoUpdateData', result);
  }
  emits('getAllData', data);
};
const cancel = () => {
  emits('cancel');
  showModal.value = false;
};
const style = computed<CSSProperties>(() =>
  Object.assign(
    {},
    props.fullScreen
      ? {
          width: '100%',
          height: '100%',
        }
      : {
          width: '800px',
          height: '500px',
        },
    props.style ? props.style : {}
  )
);
const openModal = () => {
  if (!props.useDyModal) {
    showModal.value = true;
    return;
  }
  const id = 'dyLayer' + new Date().getTime();
  Layer.open({
    id,
    title: '编辑空间信息',
    mask: true,
    autoInfo: false,
    autoRsize: true,
    content: {
      component: ObjectEdit,
      props: {
        onCancel: () => {
          Layer.close(id);
          emits('cancel');
        },
        onGetAllData: getAllData,
        'onUpdate:modelValue': updateData,
        modelValue: props.modelValue,
        useDyStyle: props.useDyModal,
        ...instance!.attrs,
      },
    },
    position: {
      width: 800,
      height: 500,
    },
  } as any);
  nextTick(() => {
    const el = document.querySelector(`#${id} .n-config-provider`) as HTMLElement;
    if (el) {
      el.style.height = '100%';
      el.style.paddingBottom = '50px';
    }
  });
};
</script>

<style scoped lang="less">
.edit-card {
  width: auto;
}
.edit-container {
  // position: relative;
  // box-sizing: content-box;
  // border:15px solid rgba(0, 0, 0, 0.5);
  // border-top:40px solid rgba(0, 0, 0, 0.5);
  // &::before{
  //   display: block;
  //   content: '-空间信息编辑';
  //   position: absolute;
  //   top: -30px;
  //   left: 10px;
  //   color: #fff;
  //   font-size: 16px;
  //   font-weight: 600px;
  // }
  box-shadow: rgba(255, 255, 255, 1) 0px 0px 20px;
  border-radius: 5px;
  overflow: hidden;
}
</style>